<template>
  <div style="margin-right: 20px; margin-left: -20px">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
    <Detail @register="registerDesc" />
  </div>
</template>
<script lang="ts" name="user-login-log" setup>
  import { ref, Ref, onMounted } from "vue"
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useUserStore } from "/@/store/modules/user"
  import { pageLoginLog } from "/@/api/iam/loginLog"
  import { loginLogColumns, loginLogSearchFormSchema } from "../data"
  import Detail from "./LoginLogDetail.vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  const { createMessage } = useMessage()
  const [registerDesc, { openDrawer: openLogDesc }] = useDrawer()

  const { prefixCls, tableContext } = useListPage({
    designScope: "login-log",
    tableProps: {
      title: "登录日志",
      api: pageLoginLog,
      columns: loginLogColumns,
      beforeFetch: (params) => {
        params.userId = useUserStore().getUserInfo.id
      },
      bordered: false,
      canResize: false,
      rowSelectionTipType: "onTableTitle",
      actionColumn: {
        width: 110,
        title: "操作",
        dataIndex: "action",
        fixed: false,
        slots: { customRender: "action" },
      },
      formConfig: {
        labelWidth: 80,
        schemas: loginLogSearchFormSchema,
        fieldMapToTime: [["fieldTime", ["beginDate", "endDate"], "YYYY-MM-DD HH:mm:ss"]],
      },
    },
  })

  const [registerTable, { reload, getForm }, {}] = tableContext

  onMounted(async () => {})

  function getActions(record) {
    return [
      {
        label: "详情",
        onClick: handleDesc.bind(null, record),
      },
    ]
  }

  function handleDesc(record) {
    openLogDesc(true, {
      record,
      isUpdate: true,
    })
  }
</script>
